<template>
	<section class="padding"> 
	  <el-row >
		<el-row v-if="editVisible"> 
		  <el-col :span="14">
			<el-checkbox 
			  v-model="isPub"
			  true-label="1"
			  false-label="0"
			>公共分类</el-checkbox>
			<el-input
			  style="width:50%;"
			  v-model="needAddTagCategoryNameInputValue"
			  placeholder="回车直接快速添加标签分类"
			  @keyup.enter.native="addTagCategorySubmitMethod"
			></el-input>
			<el-button type="primary"  @click="addTagCategorySubmitMethod" icon="el-icon-finished">保存分类</el-button> 
		  </el-col> 
		</el-row>
	  </el-row>
	  <el-row v-if="editVisible==false"   ref="table">
		<el-row v-for="(item,index) in convertTags" :key="item.categoryId">
		  <h4>
			<div>
			  {{item.categoryName+(item.pubc=='1'?'(公共)':'')}} 
			</div>
		  </h4>
		  <el-col :span="24" style="margin-left:30px;display:flex;flex-wrap: wrap;width: 100%;">
			<div
			  :class="v.checked?'checkCopyButton':'copyButton'"
			  v-for="(v,valueIndex) in item.values"
			  :key="valueIndex"
			  @click="clickTagMethod(index,valueIndex)"
			>
			  {{v.tagName +(v.pubTag=='1'?'':'')}} 
			</div>  
		  </el-col>
		</el-row>
	  </el-row>
	  <el-row v-else  ref="table">
		<el-row v-for="(item,index) in convertTags" :key="item.categoryId">
		  <h4>
			<div>
			  {{item.categoryName+(item.pubc=='1'?'(公共)':'')}}
			  <i
				class="el-icon-close closeStyle"
				@click.stop="delTagCategoryMethod(item.categoryId,index)"
			  ></i>:
			</div>
		  </h4>
		  <el-col :span="24" style="margin-left:30px;display:flex;flex-wrap: wrap;width: 100%;">
			<div
			  :class="'copyButton'"
			  v-for="(v,valueIndex) in item.values"
			  :key="valueIndex"
			  @click="clickTagMethod(index,valueIndex)"
			>
			  {{v.tagName +(v.pubTag=='1'?'':'')}}
			  <i
				class="el-icon-close closeStyle"
				@click.stop="delTagMethod(v.tagId,index,valueIndex)"
			  ></i>
			</div>
			<div class="input-tag" v-if="item.showAddButtonVisible">
			  <el-input
				style="width:200px;"
				v-model="item.showAddButtonInputValue"
				placeholder="请输入标签,回车即可"
				@keyup.enter.native="addTagMethod(index)"
				autofocus
			  ></el-input>
			</div>
			<div v-else class="add" @click="showAddButtonMethod(index)">
			  <i class="el-icon-circle-plus-outline" style="font-size:35px;"></i>
			</div>
		  </el-col>
		</el-row>
	  </el-row> 
	  
	  <el-row v-if="editVisible==false" class="footer"> 
			<el-button type="primary"  @click="selectListConfirm" icon="el-icon-finished">确认选择</el-button>
			<el-button  @click="searchTableDatas" v-loading="load.list" icon="el-icon-search">刷新标签</el-button> 
			<el-button   @click="editVisible=true" icon="el-icon-edit">去管理标签</el-button>  
		</el-row>
	  
		<el-row v-if="editVisible==true" class="footer"> 
			 <el-button  @click="editVisible=false" icon="el-icon-back">返回</el-button> 
		 </el-row>
	</section>
  </template>
  
  <script>
  
  import { MdpTableMixin } from '@/components/mdp-ui/mixin/MdpTableMixin.js';
   import { mapGetters } from 'vuex'
  
  export default {
  name:'tagMng',
  mixins:[MdpTableMixin],
  components: { 
  },
  computed: {
  },
  watch:{
  },
  data() {
	  return {
		  menuDefId:'',//menu_def.id 菜单表菜单编号，用于按钮权限判断
		  menuDefName:'arc_tag',//menu_def.name 功能名称，用于导出excel等文件名
		  refId:'tag',//引用编号，<table :ref="refId+'Table'"> <form :ref="refId+'Form'">
		  pkNames:["branchId", "id"],//表格主键的java属性名称，驼峰命名，默认为id,支持多主键
		  currOpType:'mng',//表格 mng-综合管理具有最大权限，所有按钮可动、detail-只看不能操作
		  filters:{//查询参数
  
		  },
		  defaultFilters:{//默认查询参数,第一次打开界面的时候用到，恢复默认值的时候用到
  
		  },
  
		  defaultCheckColumnNum:8,//默认展示的表格列数，前8列
  
		  editable:false,//是否可编辑模式
  
		  editVisible:false,
		  //增删改查(含批量)接口
		  apis:{
			  list: this.$mdp.getAllTag,
			  add: this.$mdp.addTag,
			  del: this.$mdp.delTag,   
			  addCategory:this.$mdp.addTagCategory,
			  delCategory:this.$mdp.delTagCategory,
		  },
		  isPub:'0',
		  convertTags:[],
		  needAddTagCategoryNameInputValue:'',
  
	  }
  },
  methods: {
	   //页面初始化需要配置的特殊逻辑写这里
		initCurrData(){
		  debugger
		   this.searchTableDatas();
		},
  
		/**
		 * 检查参数是否满足调用后台接口的条件
		 *
		 * @param params 提交给后台的参数池,map类型
		 * @returns true / false
		 */
		preQueryParamCheck(params){
			return true;
		},
  
		//页面数据加载完后需要对数据进行加工处理的
		afterList(tableDatas,isOk,apiName){ 
		  if (isOk) {   
			let allTag = tableDatas;
			let convert = [];
			for (let i = 0; i < allTag.length; i++) {
			let flag = true; //判断是否需要添加
			var tag = allTag[i];
			for (let j = 0; j < convert.length; j++) {
	  
			  if (tag.tagId && tag.categoryId == convert[j].categoryId) {
			  let json = {
				"isSaveInDatabase": true,
				"checked": tag.checked ? true : false,
				"tagId": tag.tagId,
				"tagName": tag.tagName,
				"pubTag": tag.pubTag,
			  }
			  if (this.tagIds && this.tagIds.some(id => id == json.tagId)) {
				json.checked = true;
			  }
			  convert[j].values.push(json);
			  flag = false;
			  break;
			  }
			}
			if (flag) {
			  let json = {
			  "showAddButtonVisible": false, //添加标签按钮
			  "showAddButtonInputValue": '', //添加标签按钮的输入框的值
			  "categoryId": tag.categoryId,
			  "categoryName": tag.categoryName,
			  "pubc": tag.pubc,
			  "values": [{
				"isSaveInDatabase": false,
				"checked": false,
				"tagId": tag.tagId,
				"tagName": tag.tagName,
				"pubTag": tag.pubTag,
			  }]
			  }
			  if (!json.values[0].tagId) {
			  json.values = [];
			  } else {
	  
			  if (this.tagIds && this.tagIds.some(id => id == json.values[0].tagId)) {
				json.values[0].checked = true;
			  }
			  }
			  convert.push(json);
			}
			}
			this.convertTags = convert;
		  }
		},
  
		/**
		 * 对修改的字段进行判断，返回false ,将取消更新数据库
		 * @param {*} row 当前选中的行
		 * @param {*} fieldName 修改的字段名
		 * @param {*} $event 修改后的值
		 * @param {*} params 将要提交服务器的参数
		 * @returns true/false 返回false ,将取消更新数据库
		 */
		editSomeFieldsCheck(row,fieldName,$event,params){
			if(this.currOpType=='add'||this.currOpType=='detail'){
				return false;
			}
			params[fieldName]=$event
			return true;
		},
		 /**
		 * 设置某个关键词、按钮、输入框禁用 disabledRules['addBtn']=false
		 * 判断某个对象是否可编辑 this.disabledJudge('addBtn')==false
		 */
		disabledRulesInit(disabledRules){
  
		}, 
	  //添加标签分类的方法
		  addTagCategorySubmitMethod() {
			let that = this;
			if (!(this.userInfo.isPlatformAdmin || this.userInfo.isSuperAdmin)) {
			  if (this.isPub == '1') {
				this.$notify({position:'bottom-left',showClose: true,
				  message: "你不是平台管理员不能添加公共标签分类",
				  type: 'error'
				});
				return;
			  }
			}
	
			if (this.convertTags.some(i => i.categoryName == this.needAddTagCategoryNameInputValue)) {
			  this.$notify({position:'bottom-left',showClose: true,
				message: "标签分类已经存在",
				type: 'error'
			  });
			  return false;
			}
			if (!this.needAddTagCategoryNameInputValue) {
		  this.$notify({position:'bottom-left',showClose: true,
				message: "标签分类名称不能为空",
				type: 'error'
			  });
			  return;
			}
			let params = {
			  "branchId": this.userInfo.branchId,
			  "shopId": this.userInfo.shopId,
			  "categoryName": this.needAddTagCategoryNameInputValue,
			  "isPub": this.isPub
			};
			that.load.list = true;
			this.apis.addCategory(params).then((res) => {
			  that.load.list = false;
			  var tips = res.data.tips;
			  if (tips.isOk) {
				that.needAddTagCategoryNameInputValue = '';
				let json = {
				  "showAddButtonVisible": false, //添加标签按钮
				  "showAddButtonInputValue": '', //添加标签按钮的输入框的值
				  "categoryId": res.data.data.id,
				  "categoryName": res.data.data.categoryName,
				  "values": [],
				  "pubc": res.data.data.isPub
				}
				this.convertTags.push(json);
			  }
			  this.$notify({position:'bottom-left',showClose: true,
				message: tips.msg,
				type: tips.isOk ? 'success' : 'error'
			  });
			}).catch(err => this.load.list = false);
		  }, 
		  //删除标签分类的方法
		  delTagCategoryMethod(categoryId, index) {
	
			let that = this;
			if (!categoryId) {
			  return;
			};
			let params = {
			  "shopId": this.userInfo.shopId,
			  "branchId": this.userInfo.branchId,
			  "id": categoryId
			}
			if (!this.userInfo.isPlatformAdmin && !this.userInfo.isSuperAdmin) {
			  if (this.convertTags.some(i => i.pubc == '1' && i.categoryId == categoryId)) {
				this.$notify({position:'bottom-left',showClose: true,
				  message: "公共分类不允许删除",
				  type: 'error'
				});
				return;
			  }
			}
			this.$confirm('此操作将永久删除该标签分类, 并连同该标签分类下面的标签也删除，是否继续?', '提示', {
			  confirmButtonText: '确定',
			  cancelButtonText: '取消',
			  type: 'warning'
			}).then(() => {
			  that.load.list = true;
			  this.apis.delCategory(params).then((res) => {
				that.load.list = false;
				var tips = res.data.tips;
				if (tips.isOk) {
				  this.convertTags.splice(index, 1);
				  /*this.getTags();*/
				}
				this.$notify({position:'bottom-left',showClose: true,
				  message: tips.msg,
				  type: tips.isOk ? 'success' : 'error'
				});
			  }).catch(err => this.load.list = false);
			}).catch(() => {
	
			});
		  },
	  clickTagMethod(index, valueIndex) {
			this.convertTags[index].values[valueIndex].checked = !this.convertTags[index].values[valueIndex].checked;
		  },
	
		  //显示添加按钮的方法
		  showAddButtonMethod(index) {
			this.convertTags[index].showAddButtonVisible = true;
		  },
		  //添加标签的方法
		  addTagMethod(index) {
			if (!this.userInfo.isPlatformAdmin && !this.userInfo.isSuperAdmin) {
			  if (this.isPub == '1') {
				this.$notify({position:'bottom-left',showClose: true,
				  message: "不是平台管理员，不允许增加公共标签",
				  type: 'error'
				});
				return;
			  }
			}
			if (this.convertTags.some(i => {
				return i.values.some(tag => tag.tagName == this.convertTags[index].showAddButtonInputValue)
			  })) {
			  this.$notify({position:'bottom-left',showClose: true,
				message: "标签已经存在",
				type: 'error'
			  });
			  return false;
			}
			if (!this.convertTags[index].pubc) {
			  if (this.isPub == '1') {
				this.$notify({position:'bottom-left',showClose: true,
				  message: "该分类不是公共分类，不能添加公共标签",
				  type: 'error'
				});
				return false;
			  }
			}
			let that = this;
			let tagName = this.convertTags[index].showAddButtonInputValue;
			let categoryId = this.convertTags[index].categoryId;
			let params = {
			  "branchId": that.userInfo.branchId, 
			  "categoryId": categoryId,
			  "tagName": tagName,
			  "isPub": this.isPub
			};
	
			if (!params.tagName) {
			  return
			}
			console.log("params")
			console.log(params)
			this.load.list = true;
			this.apis.add(params).then((res) => {
			  this.load.list = false;
			  var tips = res.data.tips;
			  if (tips.isOk) {
				let json = {
				  "isSaveInDatabase": false,
				  "checked": false,
				  "tagId": res.data.data.id,
				  "tagName": res.data.data.tagName,
				  "pubTag": res.data.data.isPub
				}
				this.convertTags[index].showAddButtonInputValue = '';
				this.convertTags[index].values.push(json);
			  }
			  this.$notify({position:'bottom-left',showClose: true,
				message: tips.msg,
				type: tips.isOk ? 'success' : 'error'
			  });
			}).catch(err => this.load.list = false);
		  },
		  //删除标签的方法
		  delTagMethod(tagId, index, valueIndex) {
			if (!this.userInfo.isPlatformAdmin && !this.userInfo.isSuperAdmin) {
			  if (this.convertTags[index].values.some(i => i.pubTag == '1' && i.tagId == tagId)) {
				this.$notify({position:'bottom-left',showClose: true,
				  message: "公共标签不允许删除",
				  type: 'error'
				});
				return;
			  }
			}
			let that = this;
	
			let params = {
			  "id": tagId
			}
			console.log("params.id-------------------------" + params.id);
			if (!params.id) {
			  return;
			}
	
			this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
			  confirmButtonText: '确定',
			  cancelButtonText: '取消',
			  type: 'warning'
			}).then(() => {
			  that.load.list = true;
			  this.apis.del(params).then((res) => {
				that.load.list = false;
				var tips = res.data.tips;
				if (tips.isOk) {
				  this.convertTags[index].values.splice(valueIndex, 1);
				  /*this.getTags();*/
				}
				this.$notify({position:'bottom-left',showClose: true,
				  message: tips.msg,
				  type: tips.isOk ? 'success' : 'error'
				});
			  }).catch(err => this.load.list = false);
			}).catch(() => {
	
			});
		  },
		  //添加标签分类的显示的方法
		  showwAddTagCategoryVisibleMethod() {
			this.showwAddTagCategoryVisible = true;
		  },
	  
	  selectListConfirm:function(){
		var tags=[]
		this.convertTags.forEach(k=>{
		  if(k.values){
			k.values.forEach(x=>{
			  if(x.checked){
				x.categoryId=k.categoryId
				x.categoryName=k.categoryName
				tags.push(x)
			  }
			})
		  }
		})
		if(!tags || tags.length==0){
		  this.$emit('select',null)
		}else if(this.multiple){
		  this.$emit('select',tags)
		}else{
		  this.$emit('select',tags[0])
		}
		  
	  },
  },
  mounted() {
  
  }
  }
  
  </script>
  
  <style scoped>
  .copyButton {
	  margin-left: 5px;
	  margin-top:2px;
	  border-radius: 20px;
	  padding: 10px 1px;
	  border: 1px solid rgb(220, 223, 230);
	  /* color:#039; */
	}
	
	.copyButton:hover {
	  color: #409eff;
	  border-color: #c6e2ff;
	  background-color: #ecf5ff;
	  cursor: default;
	}
	
	.checkCopyButton {
	  /*color: #fff;*/
	  margin-left: 5px;
	  margin-top:2px;
	  border-radius: 20px;
	  padding: 10px 1px;
	  border: 1px solid #ffa00a;
	  /*background-color: rgba(230, 162, 60, .1);*/
	  /* background-color: #f9f9f9; */
	  background-color: #fff;
	  /*border-color: rgba(230,162,60,.2);*/
	  color: #ffa00a;
	}
	
	.add {
	  display: flex;
	  align-items: center;
	  margin-left: 10px;
	  margin-top: 2px;
	}
	
	.add:hover {
	  cursor: pointer;
	  animation: myrotate 0.5s linear infinite;
	}
	
	.input-tag {
	  margin-left: 10px;
	  margin-top: 2px;
	  align-self: center;
	}
	.closeStyle {
	  padding: 1px;
	}
	
	.closeStyle:hover {
	  cursor: pointer;
	  /* border-color:#f40; */
	  /* border: 1px solid #f40; */
	  background-color: #ffa00a;
	  color: #fff;
	  border-radius: 50%;
	  padding: 1px;
	  animation: myrotate 1s linear;
	}
	
	.addTagSquare {
	  width: 15px;
	  height: 15px;
	  display: inline-block;
	  background-color: #ffa00a;
	  animation: myrotate 2s linear infinite;
	}
	
	.closeTagSquare {
	  width: 15px;
	  height: 15px;
	  display: inline-block;
	  background-color: #fff;
	  animation: myrotate 2s linear infinite;
	}
	@keyframes myrotate {
	  0% {
		transform: rotate(0deg);
		box-shadow: 0px 0px 10px #fff;
	  }
	
	  50% {
		transform: rotate(180deg);
		box-shadow: 0px 0px 45px #fff;
	  }
	
	  100% {
		transform: rotate(360deg);
		box-shadow: 0px 0px 10px #fff;
	  }
	} 
  </style>